<template>
  <div class="wrapper">
    <!-- 操作 -->
    <DialogMessageActions
      :config="currentSession.config"
    ></DialogMessageActions>
    <a-textarea
      v-model:value="inputMessage"
      class="textarea"
      placeholder="请输入"
      @keydown="handleKeyDown"
    ></a-textarea>
    <a-button
      :disabled="!inputMessage.length"
      type="primary"
      class="btn"
      @click="onSend(inputMessage)"
      >发送(Ctrl+Enter)</a-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import DialogMessageActions from './DialogMessageActions.vue';
import { useChatStore } from '@/store/useChatStore';

const emits = defineEmits(['pressEnter']);

const chatStore = useChatStore();
const currentSession = chatStore.currentSession();

const inputMessage = ref('');
const handleKeyDown = (e: any) => {
  if (e.ctrlKey && e.key === 'Enter') {
    onSend(e.target.value);
  }
};

const onSend = (value: any) => {
  // 输入内容
  emits('pressEnter', value);
  // 清空当前对话框
  inputMessage.value = '';
};
</script>

<style scoped lang="scss">
.wrapper {
  border-top: 1px solid #f5f5f5;
  padding: 12px;
  position: relative;
}

.textarea {
  margin-top: 16px;
  resize: none !important;
  outline: none;
  height: 200px !important;
  overflow: auto;
  border: 1px solid var(--primary) !important;
  &:focus {
    border: 1px solid var(--primary) !important;
    outline: none !important;
    box-shadow: none !important;
  }
}
.btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  border: none;
  background-color: var(--primary);
}
</style>
